<script>
import { defineComponent,getCurrentInstance,ref } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useCounterStore } from '../stores'

export default defineComponent({
    setup(props,context) {
        const store=useCounterStore()
        const router=useRouter()
        const route=useRoute()
        const drawer=ref(false)
        const nickName=ref('')
        const userName=ref('')
        const email=ref('')
        const captcha=ref('')
        const password1=ref('')
        const password2=ref('')
        const title=ref('')
        const title2=ref('')
        const pswdFlag=ref(false)
        const cptcFlag=ref(false)
        const drawer2=ref(false)
        const {proxy}=getCurrentInstance()
        // 检查重置密码：两次密码输入是否一致以及是否为空、是否超过6位
        function checkPassword(){
            if(password1.value!='' || password2.value!=''){
                if(password1.value.length>=6){
                    if(password1.value==password2.value){
                        pswdFlag.value=true
                        ElMessage({
                            showClose: true,
                            message: '两次密码输入格式正确 ^.^',
                            type: 'success',
                        })
                    }else{
                        ElMessage({
                            showClose: true,
                            message: '两次密码不一致，请再次输入 X.X',
                            type: 'error',
                        })
                        pswdFlag.value=false
                    }
                }else{
                    ElMessage({
                        showClose: true,
                        message: '密码长度不能小于6位 X.X',
                        type: 'error',
                    })
                    pswdFlag.value=false
                }
            }else{
                ElMessage({
                    showClose: true,
                    message: '密码不能为空 X.X',
                    type: 'error',
                })
                pswdFlag.value=false
            }      
        }
        // 检查注册：密码是否为空以及是否超过6位
        function checkPassword2(){
            if(password1.value!=''){
                if(password1.value.length>=6){
                    ElMessage({
                            showClose: true,
                            message: '密码输入格式正确 ^.^',
                            type: 'success',
                        })
                    pswdFlag.value=true
                }else{
                    ElMessage({
                        showClose: true,
                        message: '密码长度不能小于6位 X.X',
                        type: 'error',
                    })
                    pswdFlag.value=false
                }
            }else{
                ElMessage({
                    showClose: true,
                    message: '密码不能为空 X.X',
                    type: 'error',
                })
                pswdFlag.value=false
            }
        }
        // 控制注册界面是否弹出
        function cancelClick() {
            drawer.value = false
        }
        // 将注册信息存入
        function confirmClick() {
            ElMessageBox.confirm(`Are you sure the information is correct ?`)
                .then(() => {
                    if(pswdFlag && cptcFlag){
                        proxy.$http.post('/system/user',{
                            'nickName':nickName.value,
                            'userName':userName.value,
                            'email':email.value,
                            'password':password1.value
                        }).then((res)=>{
                            ElMessage({
                                showClose: true,
                                message: '注册成功,可以登录啦 ^.^',
                                type: 'success',
                            })
                        }).catch((err)=>{
                            ElMessage({
                                showClose: true,
                                message: '注册失败,请联系客服 X.X',
                                type: 'error',
                            })
                        })
                    }
                    drawer.value = false
                })
                .catch(() => {
                    // catch error
                })
        }
        // 控制重置密码界面是否弹出
        function cancelClick2() {
            drawer.value = false
        }
        // 将重置密码信息存入
        function confirmClick2() {
            ElMessageBox.confirm(`Are you sure you reset to this password ?`)
                .then(() => {
                    if(pswdFlag && cptcFlag){
                    proxy.$http.get(`/system/user/get/${userName.value}`)
                        .then((res)=>{
                            proxy.$http.post('/system/user/reset',{
                                // 'userId':res.data[0].userId,
                                'userName':userName.value,
                                // 'email':email.value,
                                'password':password2.value
                            }).then((res)=>{
                                ElMessage({
                                    showClose: true,
                                    message: '密码重置成功,可以登录啦 ^.^',
                                    type: 'success',
                                })
                            }).catch((err)=>{
                                ElMessage({
                                    showClose: true,
                                    message: '密码重置失败,请联系客服 X.X',
                                    type: 'error',
                                })
                            })
                        })
                    }
                    drawer2.value = false
                })
                .catch(() => {
                    
                })
        }
        // 发送验证码请求
        function sendMsg(){
            console.log(email.value)
            proxy.$http.post(`/system/user/sendMsg/${email.value}`)
            .then((res)=>{
                ElMessage({
                        showClose: true,
                        message: res.msg,
                        type: 'success',
                })
            }).catch((err)=>{
                ElMessage({
                    showClose: true,
                    message: '未提供邮箱,验证码发送失败 X.X',
                    type: 'error',
                })
            })
        }
        // 验证码验证请求
        function checkCaptcha(){
            var map='{"email":"' +email.value
            + '","code":"' + captcha.value
            + '"}'
            proxy.$http({
                method:'POST',
                headers:{'content-type':'application/json;charset=UTF-8'},
                data:map,
                url:`/system/user/send`
            }).then((res)=>{
                if(res.code==200){
                    cptcFlag.value=true
                }else{
                    cptcFlag.value=false
                }
                if(res.code==200){
                    ElMessage({
                        showClose: true,
                        message: '验证码正确 ^.^',
                        type: 'success',
                    })
                }else{
                    ElMessage({
                        showClose: true,
                        message: '验证码错误 X.X',
                        type: 'error',
                    })
                }
            })
        }
        // 登录校验
        const login=()=>{
            proxy.$http.post(`/login?userName=${userName.value}&password=${password1.value}`)
            .then((res)=>{
                if(password1.value!=''){
                    console.log(res)
                    if(res.code==200){
                        ElMessage({
                            showClose: true,
                            message: '欢迎登陆科加斯任务管理系统 ^.^',
                            type: 'success',
                        })
                        let flag=false
                        proxy.$http.get(`/system/user/get/${userName.value}`)
                        .then(res=>{
                            store.setUserId(res.data[0].userId)
                            proxy.$http.get(`/system/user/${res.data[0].userId}`)
                            .then(res=>{
                                console.log(res)
                                for(var i=0;i<res.roleIds.length;i++){
                                    console.log(res.roleIds[i])
                                    if(res.roleIds[i]==2||res.roleIds[i]==1){
                                        flag=true

                                    }else{
                                        flag=false
                                    }
                                }
                                store.setFlag(flag)
                                 
                            }) 
                        })
                        store.setToken(res.token)
                        store.setUserName(userName.value)
                        router.push("/home")
                    }else{
                        ElMessage({
                            showClose: true,
                            message: '用户名或密码错误 X.X',
                            type: 'error',
                        })
                    }
                }else{
                    ElMessage({
                        showClose: true,
                        message: '密码不能为空 X.X',
                        type: 'error',
                    })
                }
            })
            
        }
        return{
            proxy,
            nickName,
            userName,
            captcha,
            email,
            password1,
            password2,
            drawer,
            drawer2,
            pswdFlag,
            cptcFlag,
            cancelClick,
            cancelClick2,
            confirmClick,
            confirmClick2,
            checkPassword,
            checkPassword2,
            sendMsg,
            checkCaptcha,
            login,
        }
    },
})

</script>

<template>
    <div class="body">
        <div class="container">
            <div class="drop">
                <div class="content">
                    <h2>Sign In</h2>
                    <div class="form">
                        <div class="inputBox">
                            <input class="input" type="text" placeholder="UserName" v-model="userName">
                        </div>
                        <div class="inputBox">
                            <input class="input" type="password" placeholder="Password" v-model="password1">
                        </div>
                        <div class="inputBox">
                            <button class="input" @click="login()">Login</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btns" @click="drawer2 = true">Forget Passwrod</button>
            <button class="btns signup" @click="drawer = true">Sign Up</button>
        </div>
        <div class="square">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="circle">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div>
            <el-drawer v-model="drawer" direction="btt" size="90%" style="background: linear-gradient(200deg,#86adf4,#f1bdff);">
                <template #header>
                <h2>注册登记</h2>
                </template>
                <template #default>
                    <div class="content2">
                        <span class="input input--kaede">
                            <input class="input__field input__field--kaede" type="text" id="input-34" v-model="nickName"/>
                            <label class="input__label input__label--kaede" for="input-34">
                                <span class="input__label-content input__label-content--kaede">昵称</span>
                            </label>
                        </span>
                        <span class="input input--kaede">
                            <input class="input__field input__field--kaede" type="text" id="input-35" v-model="userName"/>
                            <label class="input__label input__label--kaede" for="input-35">
                                <span class="input__label-content input__label-content--kaede">用户名</span>
                            </label>
                        </span>
                        <span class="input input--kaede">
                            <input class="input__field input__field--kaede" type="text" id="input-36" v-model="email"/>
                            <label class="input__label input__label--kaede" for="input-36">
                                <span class="input__label-content input__label-content--kaede">邮箱</span>
                            </label>
                        </span>
                        <el-button type="primary" plain @click="sendMsg()" style="margin-top: -30px;">发送验证码</el-button>
                        <span class="input input--kaede">
                            <input class="input__field input__field--kaede" type="text" id="input-38" v-model="password1" @blur="checkPassword2()"/>
                            <label class="input__label input__label--kaede" for="input-38">
                                <span class="input__label-content input__label-content--kaede">密码</span>
                            </label>
                        </span>
                        <span class="input input--kaede">
                            <input class="input__field input__field--kaede" type="text" id="input-39" v-model="captcha" @blur="checkCaptcha()"/>
                            <label class="input__label input__label--kaede" for="input-39">
                                <span class="input__label-content input__label-content--kaede">验证码</span>
                            </label>
                        </span>
                    </div>
                </template>
                <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </div>
                </template>
            </el-drawer>
          </div>
          <div>
            <el-drawer v-model="drawer2" direction="btt" size="90%" style="background: linear-gradient(200deg,#f1bdff,#86adf4);">
                <template #header>
                <h2>重置密码</h2>
                </template>
                <template #default>
                <div class="content2">
                    <span class="input input--kaede">
                        <input class="input__field input__field--kaede" type="text" id="input-35" v-model="userName"/>
                        <label class="input__label input__label--kaede" for="input-35">
                            <span class="input__label-content input__label-content--kaede">用户名</span>
                        </label>
                    </span>
                    <span class="input input--kaede">
                        <input class="input__field input__field--kaede" type="text" id="input-36" v-model="email"/>
                        <label class="input__label input__label--kaede" for="input-36">
                            <span class="input__label-content input__label-content--kaede">邮箱</span>
                        </label>
                    </span>
                    <el-button type="primary" plain style="margin-top: -30px;" @click="sendMsg()" >发送验证码</el-button>
                    <span class="input input--kaede">
                        <input class="input__field input__field--kaede" type="text" id="input-37" v-model="password1"/>
                        <label class="input__label input__label--kaede" for="input-37">
                            <span class="input__label-content input__label-content--kaede">新密码</span>
                        </label>
                    </span>
                    <span class="input input--kaede">
                        <input class="input__field input__field--kaede" type="text" id="input-38" v-model="password2" @blur="checkPassword()"/>
                        <label class="input__label input__label--kaede" for="input-38">
                            <span class="input__label-content input__label-content--kaede">确认新密码</span>
                        </label>
                    </span>
                    <span class="input input--kaede">
                        <input class="input__field input__field--kaede" type="text" id="input-39" v-model="captcha" @blur="checkCaptcha()"/>
                        <label class="input__label input__label--kaede" for="input-39">
                            <span class="input__label-content input__label-content--kaede">验证码</span>
                        </label>
                    </span>
                </div>
                </template>
                <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick2">取消</el-button>
                    <el-button type="primary" @click="confirmClick2">确定</el-button>
                </div>
                </template>
            </el-drawer>
          </div>
    </div>
</template>

<style scoped>
.body{
    margin: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
}
h1{
    margin-top: -630px;
    margin-right: -300px;
    top: 10px;
    color: #fff;
    border-radius: 30px;
    width: 300px;
    height: 50px;
    text-align: center;
    background:linear-gradient(200deg,#a9c1ed,#e3c5eb) ;
}
h1:hover{
    background:linear-gradient(200deg,#e3c5eb,#a9c1ed) ;
}
.container{
    position: relative;
    left: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .drop{
    position: relative;
    width: 350px;
    height: 350px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition:0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:57% 43% 35% 65% / 46% 41% 59% 54%  ;
}
.container .drop:hover{
    border-radius: 50%;
}
.container .drop::before{
    content: '';
    position: absolute;
    width: 35px;
    top: 50px;
    left: 85px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}
.container .drop::after{
    content: '';
    position: absolute;
    width: 15px;
    top: 90px;
    left: 115px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}
.container .drop .content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;
}
.content2 {
    font-size: 130%;
    padding-top : -2px;;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.container .drop .content h2{
    position: relative;
    color: #333;
    font-size: 1.5em;
}
.container .drop .content .form{
    display:flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.container .drop .content .form .inputBox{
    position: relative;
    width: 225px;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255,255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    border-radius: 25px;
}
.container .drop .content .form .inputBox::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}
.container .drop .content .form .inputBox .input{
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
}
.container .drop .content .form .inputBox button{
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.container .drop .content .form .inputBox:last-child{
    width: 120px;
    background: #ff0f5b;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    transition: 0.5s;
}
.container .drop .content .form .inputBox:last-child:hover{
    width: 150px;
}
.btns{
    position: absolute;
    right: -120px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: #c61dff;
    display: flex;
    border: 1px solid transparent;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(190,1, 254, 0.05),
    15px 25px 10px rgba(190,1, 254, 0.1),
    15px 20px 20px rgba(190,1, 254, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
    border-radius: 37% 63% 30% 70% / 51% 19% 81% 49% ;
}
.btns:hover{
    border-radius: 50%;
}
.btns::before{
    content: '';
    position: absolute;
    top:15px ;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
}
.btns.signup{
bottom: 150px;
right: -120px;
width: 80px;
height: 80px;
border-radius: 59% 41% 72% 28% / 39% 43% 57% 61%   ;
background: #01b4ff;
box-shadow: inset 10px 10px 10px rgba(1,180, 255, 0.05),
15px 25px 10px rgba(1,180, 255, 0.1),
15px 20px 20px rgba(1,180, 255, 0.1),
inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}
.btns.signup::before{
    left: 20px;
    width: 15px;
    height: 15px;
}
.btns:hover{
    border-radius: 50%;
}

ul li{
  position: absolute;
  border: 1px solid #FFF;
  width: 30px;
  height: 30px;
  list-style: none;
  opacity: 0;
}
.square li{
  top: 20vh;
  left: 60vw;
  animation: square 10s linear infinite;
}
.square li:nth-child(2){
  top: 80vh;
  left: 10vw;
  animation-delay: 2s;
}
.square li:nth-child(3){
  top: 60vh;
  left: 85vw;
  animation-delay: 4s;
}
.square li:nth-child(4){
  top: 80vh;
  left: 50vw;
  animation-delay: 6s;
}
.square li:nth-child(5){
  top: 10vh;
  left: 70vw;
  animation-delay: 8s;
}
.square li:nth-child(6){
  top: 10vh;
  left: 10vw;
  animation-delay: 10s;
}
.circle li{
    bottom: 0;
    left: 15vw;
    animation: circle 10s linear infinite;
}
.circle li:nth-child(2){
    left: 35vw;
    animation-delay: 2s;
}
.circle li:nth-child(3){
    left: 55vw;
    animation-delay: 4s;
}
.circle li:nth-child(4){
    left: 75vw;
    animation-delay: 6s;
}
.circle li:nth-child(5){
    left: 90vw;
    animation-delay: 8s;
}
.circle li:nth-child(6){
    left: 35vw;
    animation-delay: 10s;
}
@keyframes square{
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}
@keyframes circle{
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}

.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 400px;
	width: calc(100% - 2em);
	vertical-align: top;
}
.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}
.input__field:focus {
	outline: none;
}
.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #6a7989;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
    padding-left: 2em;
	width: 100%;
}
.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}
.icon {
	color: #ddd;
	font-size: 150%;
}

.input--kaede {
	display: block;
	overflow: hidden;
	margin: 1em auto 2em;
	background: #EFEEEE;
}

.input__field--kaede {
	position: absolute;
	top: 0;
	right: 100%;
	width: 60%;
	height: 100%;
	background: #fff;
	color: #9DABBA;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--kaede {
	z-index: 10;
	display: block;
	width: 100%;
	height: 100%;
	text-align: left;
	cursor: text;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--kaede:focus,
.input--filled .input__field--kaede {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition-delay: 0.06s;
	transition-delay: 0.06s;
}

.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede  {
	-webkit-transform: translate3d(60%, 0, 0);
	transform: translate3d(60%, 0, 0);
	pointer-events: none;
}

@media screen and (max-width: 34em) {
	.input__field--kaede:focus + .input__label--kaede,
	.input--filled .input__label--kaede  {
		-webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
		transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
		pointer-events: none;
	}
}

</style>
